import React, { Fragment } from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import { actionCreators } from '../../store/header';

 class Header extends React.Component{
  render(){
    const { isLogin, login, logout } = this.props
    return (
      <div>
        <Link to='/'>Home</Link>
        <br />
        {isLogin ?
          (<Fragment>
            <div
              onClick={() => logout()}
            >
              退出
            </div>
            <div
            >翻译</div>
          </Fragment>)
          :
          (<div
            onClick={() => login()}
            >登录</div>)
        }
      </div>
    )
  }
}
const mapStateToProps = (state) => ({
  isLogin: state.header.isLogin
})
const mapDispatchToProps = (dispatch) => ({
  login(){
    dispatch(actionCreators.login())
  },
  logout(){
    dispatch(actionCreators.logout())
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(Header)
